<template>
  <div class="YuJingTongJi-main-con">
    <div class="currentMonthPercent-content">
      <div class="yujingtongji-title-bg">
        <span>本月报警占比</span>
      </div>
      <chart-view class="currentMonthPercent-chart-content" :chart-option="CurrentMonthPercentOpt" :auto-resize="false"
        :play-highlight="false" height="186px" width="300px"/>
    </div>
    <div class="halfYear-content">
      <div class="halfYear-title-bg">
        <span>近半年预警趋势</span>
      </div>
      <chart-view class="halfYear-chart-content" :chart-option="halfYearWarnChartOpt" :auto-resize="true"
        :play-highlight="false" height="196px" width="300px"/>
    </div>
    <div class="warnList-content">
      <div class="warnList-title-bg">
        <span>报警事件列表</span>
      </div>
      <div class="warnList-chart-content" >
        <el-table
        :data="BaoJingEventData"
        style="width: 100%;"
        height="100%"
        row-key="code"
      >
        <el-table-column
            prop="address_name"
            label="站点名称"
            width="80"
            
        >
        </el-table-column>
        <el-table-column
            prop="sttp"
            label="站点类型"
            width="80"
        >
        </el-table-column>
        <el-table-column
            prop="warntype"
            label="预警类型"
            width="118"
        >
        </el-table-column>
        <el-table-column
            prop="tm"
            label="预警时间"
            width="150"
        >
        </el-table-column>
      </el-table>
    </div>

    </div>
  </div>
</template>
  
<script>
import { getBaoJing, getQuShi, getBaoJingEvent } from "@/api/apiPOI";
// import TrendsTable from '@/components/TrendsTable.vue';
export default {
  name: "YuJingTongJi",
  components: {
    // TrendsTable
  },
  created() {
    // this.CurrentMonthPercentOpt = this.$eChartFn.CurrentMonthPercent();
    // this.halfYearWarnChartOpt = this.$eChartFn.halfYearWarnChart();
    // this.GetBaoJing();
    // this.Getqushi();
    
  },
  mounted(){
    this.GetBaoJing();
    this.Getqushi();
    this.GetBaoJingEvent();
  },
  data() {
    return {
      CurrentMonthPercentOpt: {},
      halfYearWarnChartOpt: {},
      valueMultiple: [],
      BaoJingData: [],
      QuShiData: [],
      BaoJingEventData: [],
      tableHeadData: [
        {
          column_name: 'address_name', column_comment: '类型'
        },
        {
          column_name: 'sttp', column_comment: '所属类别'
        },
        {
          column_name: 'warntype', column_comment: '报警类别'
        },
        {
          column_name: 'tm', column_comment: '发生时间'
        }
      ],
      TableData: []
    };
  },
  methods: {
    GetBaoJing() {
      getBaoJing().then((res) => {
        this.BaoJingData = res;
        this.CurrentMonthPercentOpt = this.$eChartFn.CurrentMonthPercent(this.BaoJingData);
        console.log("报警占比", this.BaoJingData);
      })
    },
    Getqushi() {
      getQuShi().then((res) => {
        this.QuShiData = res;
        this.halfYearWarnChartOpt = this.$eChartFn.halfYearWarnChart(this.QuShiData);
        console.log("预警趋势", this.QuShiData);
      })
    },
    GetBaoJingEvent() {
      getBaoJingEvent().then((res) => {
        this.BaoJingEventData = res.data;
        console.log("报警事件列表", this.BaoJingEventData);
        this.TableData = this.BaoJingEventData;
      });
    }
  },
};
</script>
  
<style lang="scss" scoped>
.YuJingTongJi-main-con {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  color: #fff;
  height: calc(100vh - 130px);
  background-color: rgba(214, 223, 2, 0);

  .currentMonthPercent-content {
    width: 300px;
    height: 230px;
    // margin-top: 20px;
    background-color: rgba($color: #02203d, $alpha: 0.8);

    .yujingtongji-title-bg {
      width: 266px;
      height: 44px;
      background-image: url("@/assets/gszl/gongshuishuju-title.png");

      span {
        font-family: SourceHanSansCN-Medium;
        font-size: 11px;
        font-weight: normal;
        font-style: italic;
        font-stretch: normal;
        line-height: 16px;
        letter-spacing: 0px;
        color: #ffffff;
        background-image: linear-gradient(to bottom, #fff 30%, #00baff);
        /*  背景线性渐变 */
        background-clip: text;
        -webkit-background-clip: text;
        /* 背景被裁减为文字的前景色 */
        -webkit-text-fill-color: transparent;
        /* 文字填充为透明，优先级比color高。  */
        position: relative;
        top: 10px;
        left: 34px;
      }
    }

    .currentMonthPercent-chart-content {
      width: 100%;
      height: calc(100% - 44px);
      background-color: rgba(32, 199, 35, 0);
    }
  }

  .halfYear-content {
    width: 300px;
    height: 240px;
    margin-top: 10px;
    background-color: rgba($color: #02203d, $alpha: 0.8);

    .halfYear-title-bg {
      width: 266px;
      height: 44px;
      background-image: url("@/assets/gszl/gongshuishuju-title.png");

      span {
        font-family: SourceHanSansCN-Medium;
        font-size: 14px;
        font-weight: normal;
        font-style: italic;
        font-stretch: normal;
        line-height: 16px;
        letter-spacing: 0px;
        color: #ffffff;
        background-image: linear-gradient(to bottom, #fff 30%, #00baff);
        /*  背景线性渐变 */
        background-clip: text;
        -webkit-background-clip: text;
        /* 背景被裁减为文字的前景色 */
        -webkit-text-fill-color: transparent;
        /* 文字填充为透明，优先级比color高。  */
        position: relative;
        top: 10px;
        left: 34px;
      }
    }

    .halfYear-chart-content {
      width: 100%;
      height: calc(100% - 44px);
      background-color: rgba(32, 199, 35, 0);
    }
  }

  .warnList-content {
    width: 300px;
    height: 290px;
    margin-top: 10px;
    background-color: rgba($color: #02203d, $alpha: 0.8);

    .warnList-title-bg {
      width: 266px;
      height: 44px;
      background-image: url("@/assets/gszl/gongshuishuju-title.png");

      span {
        font-family: SourceHanSansCN-Medium;
        font-size: 14px;
        font-weight: normal;
        font-style: italic;
        font-stretch: normal;
        line-height: 16px;
        letter-spacing: 0px;
        color: #ffffff;
        background-image: linear-gradient(to bottom, #fff 30%, #00baff);
        /*  背景线性渐变 */
        background-clip: text;
        -webkit-background-clip: text;
        /* 背景被裁减为文字的前景色 */
        -webkit-text-fill-color: transparent;
        /* 文字填充为透明，优先级比color高。  */
        position: relative;
        top: 10px;
        left: 34px;
      }
    }

    .warnList-chart-content {
      width: 90%;
      height: calc(100% - 64px);
      background-color: rgba(32, 199, 35, 0);
      margin: 0 auto;
    }
  }
}

::v-deep {

  //表单项
  .el-form-item {
    margin-bottom: 6px;
    padding: 0 20px;
  }

  .el-form-item__label {
    font-family: SourceHanSansCN-Regular !important;
    font-size: 14px !important;
    line-height: 44px !important;
    color: #daf0ff !important;
    ;
    padding: 0 0 0 16px !important;
  }

  .el-radio,
  .el-checkbox {
    color: #daf0ff;
  }




  // .el-table__body-wrapper::-webkit-scrollbar {
  //     width: 4px;
  //     height: 1px;
  //     background: rgba(9, 85, 133, 0.4);
  //     display: block;
  //     border-radius: 3px;
  // }

  // // // /*滚动条里面小方块*/
  // .el-table__body-wrapper::-webkit-scrollbar-thumb {
  //     border-radius: 5px;
  //     background: #095585;
  // }

  // // // /*滚动条里面轨道*/
  // .el-table__body-wrapper::-webkit-scrollbar-track {
  //     border-radius: 3px;
  //     background: transparent;
  // }


}
</style>